<template>
<div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item label="产品类型明细代码" prop="typeDetailCode" label-width="140px">
        <el-select
            v-model="queryParams.typeDetailCode"
            placeholder="产品类型明细代码"
            filterable
            clearable
            style="width: 240px"
           >
            <el-option
              v-for="item in productTypeDetailCodeList"
              :key="item"
              :label="item"
              :value="item"
            />
        </el-select>
    </el-form-item>
    <el-form-item label="产品类型明细名称" prop="typeDetailName" label-width="140px">
        <el-select
            v-model="queryParams.typeDetailName"
            placeholder="产品类型明细名称"
            clearable
            filterable
            style="width: 240px"
           >
            <el-option
              v-for="item in productTypeDetailNameList"
              :key="item"
              :label="item"
              :value="item"
            />
        </el-select>
    </el-form-item>
    <el-form-item label="值" prop="typeDetailValue">
        <el-select
            v-model="queryParams.typeDetailValue"
            placeholder="值"
            clearable
            filterable
            style="width: 240px"
           >
            <el-option
              v-for="item in productTypeDetailValueList"
              :key="item"
              :label="item"
              :value="item"
            />
        </el-select>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
    </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
        <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >新增</el-button>
    </el-col>
    <el-col :span="1.5">
        <el-button
        type="success"
        plain
        icon="el-icon-edit"
        size="mini"
        :disabled="single"
        @click="handleUpdate"
        >修改</el-button>
    </el-col>
    <el-col :span="1.5">
        <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        :disabled="multiple"
        @click="handleDelete"
        >删除</el-button>
    </el-col>
    <el-col :span="1.5">
        <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >导出</el-button>
    </el-col>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="ProductInfoDetailList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="id" align="center" prop="id" />
    <el-table-column label="产品代码" align="center" prop="productCode" />
    <el-table-column label="产品类型明细代码" align="center" prop="typeDetailCode" />
    <el-table-column label="产品类型明细名称" align="center" prop="typeDetailName" />
    <el-table-column label="值" align="center" prop="typeDetailValue" />
    <el-table-column label="备注" align="center" prop="remark" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
        <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
        >修改</el-button>
        <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
        >删除</el-button>
        </template>
    </el-table-column>
    </el-table>
    
    <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    @pagination="getList"
    />

    <!-- 添加或修改产品详细信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="产品名称">
        <el-input v-model="this.productName" :disabled="true"/>
        </el-form-item>
        <el-form-item label="产品类型">
        <el-input v-model="this.productTypeName" :disabled="true"/>
        </el-form-item>
        <el-form-item label="产品类型明细名称" prop="typeDetailName">
            <!-- <el-input v-model="form.typeDetailCode" placeholder="请输入产品类型明细代码" /> -->
            <el-select
            v-model="form.typeDetail"
            placeholder="产品类型明细"
            clearable
            filterable
            :disabled="title == '修改产品详细信息' ? true : false"
            style="width: 240px"
           >
            <el-option
              v-for="item in addArrList"
              :key="item.detailCode"
              :label="item.detailName"
              :value="item.detailCode +'&'+ item.detailName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="值" prop="typeDetailValue">
        <el-input v-model="form.typeDetailValue" placeholder="请输入值" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
    </div>
    </el-dialog>
</div>
</template>

<script>
import { listProductInfoDetail, getProductInfoDetail, removedProductInfoDetail, addProductInfoDetail, updateProductInfoDetail } from "@/api/produce/product-info-detail";
import { listProductTypeDetail } from "@/api/produce/product-type-detail";

export default {
name: "Product-info-detail",
data() {
    return {
    //筛选后的产品类型明细
    addArrList:[],
    //全部产品类型明细
    allTypeDetailList:[],
    // 遮罩层
    loading: true,
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    // 显示搜索条件
    showSearch: true,
    // 总条数
    total: 0,
    // 产品详细信息表格数据
    ProductInfoDetailList: [],
    // 弹出层标题
    title: "",
    // 是否显示弹出层
    open: false,
    // 产品类型明细编码列表
    productTypeDetailCodeList:[],
    // 产品类型明细名称列表
    productTypeDetailNameList:[],
    // 产品类型明细列表
    productTypeDetailList:[],
    // 产品类型明细值列表
    productTypeDetailValueList:[],
    // 产品类型编码
    productTypeCode:'',
    // 产品类型名称
    productTypeName:'',
    // 产品名称
    productName:'',
    // 产品编码
    productCode:'',
    // 产品类型明细列表
    typeDetailCodeList:[],
    // 查询参数
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        productCode: null,
        typeDetailCode: null,
        typeDetailName: null,
        typeDetailValue: '',
        sort: null,
        removed: null
    },
    // 表单参数
    form: {},
    // 表单校验
    rules: {
        productCode: [
        { required: true, message: "产品代码不能为空", trigger: "blur" }
        ],
        typeDetailCode: [
        { required: true, message: "产品类型明细代码不能为空", trigger: "blur" },
        { required: true, message: "输入规则：大小写字母、数字", trigger: "blur", pattern: /^[a-zA-Z0-9]+$/ }
        ],
        typeDetailName: [
        { required: true, message: "产品类型明细名称不能为空", trigger: "blur" }
        ],
        typeDetailValue: [
        { required: true, message: "值不能为空", trigger: "blur" }
        ],
    }
    };
},
created() {
    this.queryParams.productCode = this.$route.params && this.$route.params.productCode.split("&")[0]
    this.productCode = this.$route.params && this.$route.params.productCode.split("&")[0]
    this.productName = this.$route.params && this.$route.params.productCode.split("&")[1]
    this.productTypeCode = this.$route.params && this.$route.params.productCode.split("&")[2]
    this.productTypeName = this.$route.params && this.$route.params.productCode.split("&")[3]
    this.getList();
    this.getQueryList()
},
methods: {
    /** 查询产品详细信息列表 */
    getList() {
        this.loading = true;
        listProductInfoDetail(this.queryParams).then(response => {
            this.ProductInfoDetailList = response.rows;
            this.total = response.total;
            this.loading = false;
        });
        const params={
            pageNum: 1,
            pageSize: 100,
            productCode:this.queryParams.productCode
        }
        listProductInfoDetail(params).then(response => {
            console.log("查询全部产品类型明细",response.rows)
            this.allTypeDetailList = response.rows
        })
        .finally(()=>{
            this.getTypeDetailList()
        });
    },
    /** 查询产品类型明细 */
    getQueryList(){
        const params={
            pageNum: 1,
            pageSize: 100,
            productCode:this.productCode
        }
        listProductInfoDetail(params).then(response => {
            if(response.code === 200){
                //解决分页无法获取全部结果的字段
                if(this.productTypeDetailCodeList.length === 0){
                    for(var i=0;i<response.rows.length;i++){
                        this.productTypeDetailCodeList.push(response.rows[i].typeDetailCode)
                        this.productTypeDetailNameList.push(response.rows[i].typeDetailName)
                        if(this.productTypeDetailValueList.indexOf(response.rows[i].typeDetailValue) === -1){
                            this.productTypeDetailValueList.push(response.rows[i].typeDetailValue)
                        }
                        if(this.productTypeDetailSortList.indexOf(response.rows[i].sort) === -1){
                            this.productTypeDetailSortList.push(response.rows[i].sort)
                        }      
                    }
                }
            }
        });
    },
    /**获取产品类型明细 */
    getTypeDetailList(){
        const params={
            pageNum: 1,
            pageSize: 100,
            productTypeCode:this.productTypeCode
        }
        listProductTypeDetail(params).then(response => {
          console.log("产品类型明细",response.rows)
          //所有类型
          this.productTypeDetailList = response.rows;
          //判断产品类型明细是否已经被使用了
          for(var i=0;i<this.allTypeDetailList.length;i++){
            for(var j=0;j<this.productTypeDetailList.length;j++){
                if(this.allTypeDetailList[i].typeDetailCode == this.productTypeDetailList[j].detailCode){
                    this.productTypeDetailList[j].isHave = true
                }

            }
          }
          //筛选未被使用的
          this.addArrList  = this.productTypeDetailList.filter((item) => item.isHave !== true)
          console.log("筛选后",this.addArrList)
        })
    },
    // 取消按钮
    cancel() {
    this.open = false;
    this.reset();
    },
    // 表单重置
    reset() {
    this.form = {
        id: null,
        productCode: null,
        typeDetailCode: null,
        typeDetailName: null,
        typeDetailValue: null,
        sort: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        removed: null
    };
    this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
    this.resetForm("queryForm");
    this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
    this.ids = selection.map(item => item.id)
    this.single = selection.length!==1
    this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
        if(this.addArrList.length === 0){
            this.$message({
                message: '当前产品类型明细已全部添加',
                type: 'warning'
            });
        }else{
            this.reset();
            this.open = true;
            this.title = "添加产品详细信息";
            this.form.productCode = this.queryParams.productCode;
        }

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
    this.reset();
    const id = row.id || this.ids
    getProductInfoDetail(id).then(response => {
        console.log(response)
        this.form = response.data;
        this.form.typeDetail = response.data.typeDetailName
        this.open = true;
        this.title = "修改产品详细信息";
    });
    },
    /** 提交按钮 */
    submitForm() {
        this.form.typeDetailCode=this.form.typeDetail.split('&')[0]
        this.form.typeDetailName=this.form.typeDetail.split('&')[1]
        console.log(this.form)
        this.$refs["form"].validate(valid => {
            if (valid) {
            if (this.form.id != null) {
                updateProductInfoDetail(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
                });
            } else {
                addProductInfoDetail(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
                });
            }
            }
        });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
    const ids = row.id || this.ids;
    this.$modal.confirm('是否确认删除产品详细信息编号为"' + ids + '"的数据项？').then(function() {
        // 修改为逻辑删除
        return removedProductInfoDetail(ids);
    }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
    }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
    this.download('produce/product-info-detail/export', {
        ...this.queryParams
    }, `product-info-detail_${new Date().getTime()}.xlsx`)
    }
}
};
</script>
